<template>
  <div class="supplier-analysis bgc-black">
    <div>
      <tab-btn @getSortText="getSortText"></tab-btn>
    </div>
    <!-- 搜索框 -->
    <div class="mar-t-20">
      <search-area :total='total' :totalAmount='totalAmount' @searchRes='searchRes' @resetComditions='resetComditions' :placeholder='placeholder'></search-area>
    </div>
    <!-- 搜索条件 -->
    <div class="mar-t-20">
      <search-condition :comditions='comditions' @changeComditions='changeComditions'></search-condition>
    </div>
    <!-- 查看按钮 -->
    <div class="font-white mar-t-16">
      <view-button @changeDate='changeDate' @exportExcle="exportExcle" :sortText="sortText"></view-button>
    </div>
    <!-- 数据分析面板 -->
    <div class="mar-t-10">
      <supplier-panel></supplier-panel>
    </div>
    <!-- 分页 -->
    <div v-if="parseInt(total)" class="mar-t-20 pagination">
      <el-pagination background layout="prev, pager, next" :current-page="params.currentPage" :page-size="10" :total="parseInt(total)" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import TabBtn from './detail/components/TabBtn.vue'
import SearchArea from '../components/SearchArea.vue'
import SearchCondition from '../components/SearchCondition'
import ViewButton from '../components/ViewButton.vue'
import SupplierPanel from './components/SupplierPanel.vue'
import { pageSupplierAnalysis } from '@/api/data-analysis/data-analysis'
import { downloadFile } from '@/api/common/common'

export default {
  components: { SearchArea, SearchCondition, ViewButton, SupplierPanel, TabBtn },
  data() {
    return {
      params: {
        currentPage: 1, // 当前页
        endTime: '', // 结束时间
        enterpriseId: '', // 企业id
        oneCategoryId: '', // 一级分类id
        saleSource: '', // 销售渠道 0 微信 1:抖音 2:快手 3: 淘宝 4: 拼多多
        size: 10, // 每页显示条数，默认 10
        sortType: 2, // 排序方式 1：按销量排序 2：按销售额排序 3：退款率
        startTime: '', // 起始时间
        supplierName: '' // 供应商名称
      },
      comditions: ['oneCategory', 'saleSource'],
      total: 0,
      totalAmount: '0.00',
      placeholder: '请输入供应商名称',
      sortText: '销售额排名'
    }
  },
  mounted() {
    this.initData()
    this.resetComditions()
    const that = this
    this.$bus.$on('getSortType', function(res) {
      that.params.sortType = res
      that.pageSupplierAnalysis()
    })
  },
  destroyed() {
    this.$bus.$off('resetComditions')
  },
  methods: {
    initData() {
      // 今日时间
      this.params.endTime = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 23:59:59`
      this.params.startTime = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 00:00:00`
      this.params.enterpriseId = this.getEnterpriseId()
      console.log(2)
      this.pageSupplierAnalysis()
    },
    getSortText(text) {
      this.sortText = text
    },
    // 供应商数据分析信息
    pageSupplierAnalysis() {
      const data = this.params
      pageSupplierAnalysis(data).then(response => {
        const res = response.data
        this.total = res.total
        this.totalAmount = res.totalAmount
        this.$bus.$emit('getRecords', res.records)
      }).catch(err => {
        console.log(err)
      })
    },
    // 切换查询条件
    changeComditions(data) {
      Object.assign(this.params, data)
      this.params.currentPage = 1
      this.pageSupplierAnalysis()
    },
    // 切换查询时间
    changeDate(startTime, endTime) {
      this.params.currentPage = 1
      this.params.startTime = startTime
      this.params.endTime = endTime
      this.pageSupplierAnalysis()
    },
    // 通过商品名称 进行搜索
    searchRes(res) {
      this.params.currentPage = 1
      this.params.supplierName = res
      this.pageSupplierAnalysis()
    },
    exportExcle() {
      const data = this.params
      downloadFile('/data/userAnalysis/exportSupplierAnalysis', data, '供应商分析.xlsx')
    },
    // 改变分页
    handleCurrentChange(num) {
      this.params.currentPage = num
    },
    // 重置赛选条件
    resetComditions() {
      this.$bus.$on('resetComditions', () => {
        this.params = {
          currentPage: 1,
          sortType: 1,
          endTime: '',
          startTime: '',
          oneCategoryId: '',
          saleSource: '',
          size: 10,
          enterpriseId: '',
          supplierName: ''
        }
        this.initData()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .supplier-analysis {
    padding: 24px 24px;
    min-height: 100vh;
  }
  .pagination {
    text-align: center;
  /deep/ .el-pager li, /deep/ .btn-prev , /deep/ .btn-next{
    border: 1px solid rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.5);
    background: #2b2b2e;
  }
}

</style>